<template>
  <div class="pet-insurance-container bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto my-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">宠物保障</h1>
    
    <div class="insurance-content space-y-6">
      <!-- 理赔案例卡片 -->
      <div class="claim-case bg-orange-50 rounded-xl p-6 shadow-md border-2 border-orange-100">
        <div class="case-header flex items-center justify-between mb-4">
          <h2 class="text-xl font-bold text-orange-600">理赔案例</h2>
          <span class="text-yellow-500">⭐</span>
        </div>
        
        <div class="case-details bg-white rounded-lg p-5 shadow-sm">
          <!-- 参保计划 -->
          <div class="plan-info mb-4">
            <div class="label bg-orange-100 text-orange-700 px-3 py-1 rounded-full inline-block text-sm font-medium mb-2">参保计划</div>
            <p class="text-gray-700">平安爱宠养护无忧升级版</p>
          </div>
          
          <!-- 爱宠信息 -->
          <div class="pet-info mb-4">
            <div class="label bg-orange-100 text-orange-700 px-3 py-1 rounded-full inline-block text-sm font-medium mb-2">爱宠</div>
            <p class="text-gray-700">英国短毛猫，汤圆2岁</p>
          </div>
          
          <!-- 图片 -->
          <div class="pet-image mb-4">
            <div class="relative w-full bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
                <img src="../asserts/images/maomi.jpg" alt="英国短毛猫" class="w-full h-auto max-h-72 object-contain">
                <div class="absolute top-2 right-2 bg-orange-500 text-white text-xs px-2 py-1 rounded-full">宠物</div>
            </div>
          </div>
          
          <!-- 事件 -->
          <div class="event-info mb-4">
            <div class="label bg-orange-100 text-orange-700 px-3 py-1 rounded-full inline-block text-sm font-medium mb-2">事件</div>
            <p class="text-gray-700 text-sm leading-relaxed">
              唐先生近日发现汤圆持续软便，并发生呕吐数次，食欲下降，体重减轻，近期未换粮。随后唐先生带汤圆就诊，经检查，汤圆白细胞偏高，诊断为肠炎，需住院观察，治疗。通过抗生素治疗，汤圆不再呕吐，软便逐渐成型，一周后完全康复。
            </p>
          </div>
          
          <!-- 理赔 -->
          <div class="claim-info">
            <div class="label bg-orange-100 text-orange-700 px-3 py-1 rounded-full inline-block text-sm font-medium mb-2">理赔</div>
            <p class="text-gray-700 text-sm">
              本次治疗，唐先生共花费治疗费用720元，养护无忧报销604元，唐先生实际花费656元。
            </p>
          </div>
        </div>
        

        
        <!-- 注释 -->
        <p class="text-xs text-gray-500 mt-4 italic">
          *注：本产品需前往平安合作定点宠物医院进行治疗，定点医院清单可能发生变动，出险后请以当日好生活平台展示定点医院清单为准
        </p>
      </div>
      
      <!-- 保险服务介绍 -->
      <div class="insurance-intro">
        <h2 class="text-xl font-bold text-gray-800 mb-3">我们的宠物保障服务</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="service-card bg-blue-50 rounded-lg p-4">
            <h3 class="text-blue-700 font-semibold mb-2">健康保障</h3>
            <p class="text-gray-700 text-sm">提供宠物疾病、意外医疗保障，报销合理医疗费用，减轻宠物主人经济负担。</p>
          </div>
          <div class="service-card bg-green-50 rounded-lg p-4">
            <h3 class="text-green-700 font-semibold mb-2">专属服务</h3>
            <p class="text-gray-700 text-sm">包含宠物问诊、健康管理、疫苗提醒等增值服务，全方位呵护宠物健康。</p>
          </div>
          <div class="service-card bg-purple-50 rounded-lg p-4">
            <h3 class="text-purple-700 font-semibold mb-2">灵活方案</h3>
            <p class="text-gray-700 text-sm">多种保险方案可选，满足不同宠物品种、年龄和健康状况的保障需求。</p>
          </div>
          <div class="service-card bg-yellow-50 rounded-lg p-4">
            <h3 class="text-yellow-700 font-semibold mb-2">便捷理赔</h3>
            <p class="text-gray-700 text-sm">简化理赔流程，支持在线理赔申请，快速审核，及时赔付。</p>
          </div>
        </div>
      </div>
      
      <!-- 常见问题 -->
      <div class="faq-section">
        <h2 class="text-xl font-bold text-gray-800 mb-3">常见问题</h2>
        <div class="space-y-3">
          <div class="faq-item border-b border-gray-200 pb-3">
            <h3 class="text-gray-800 font-semibold mb-1">哪些宠物可以投保？</h3>
            <p class="text-gray-600 text-sm">我们支持猫、狗等常见宠物投保，具体以保险条款为准。</p>
          </div>
          <div class="faq-item border-b border-gray-200 pb-3">
            <h3 class="text-gray-800 font-semibold mb-1">投保后多久生效？</h3>
            <p class="text-gray-600 text-sm">一般情况下，宠物保险在投保后次日零时生效，疾病保障通常有等待期。</p>
          </div>
          <div class="faq-item">
            <h3 class="text-gray-800 font-semibold mb-1">如何申请理赔？</h3>
            <p class="text-gray-600 text-sm">可通过宠多多APP内的"我的-理赔服务"提交理赔申请，上传相关证明材料。</p>
          </div>
        </div>
      </div>
      
      <!-- 宠物科普知识 -->
      <div class="pet-science-section mt-8">
        <h2 class="text-xl font-bold text-orange-600 mb-6 text-center">宠物保障小贴士</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 宠物疫苗科普 -->
          <div class="science-card bg-orange-50 rounded-xl p-6 shadow-md border-2 border-orange-100 relative">
            <div class="absolute top-4 right-4 text-red-500 text-xl">❤</div>
            <div class="text-center mb-4">
              <img src="../asserts/images/tupian.png" alt="宠物疫苗科普" class="w-24 h-auto mx-auto rounded-lg mb-2">
            </div>
            <h3 class="text-xl font-bold text-orange-600 mb-3 text-center">宠物疫苗</h3>
            <p class="text-gray-700 text-sm leading-relaxed">
              新手养宠应该了解该怎么给宠物接种疫苗，这对宠物来说是一生中很重要的一件事。选择对宠物合适的疫苗即可有效保护宠物的生命安全，也可保障行人的生命安全，对自己和他人都是有利的保障手段。另外打疫苗前要注意宠物的状态，要选择健康状态带宠物去接种疫苗，如有生病情况需得治愈完全后接种。接种结束后需认真观察宠物状态，有不良情况的产生，需注意照顾。接种后切忌不可洗澡哦~</p>
          </div>
          
          <!-- 宠物训练科普 -->
          <div class="science-card bg-orange-50 rounded-xl p-6 shadow-md border-2 border-orange-100 relative">
            <div class="absolute top-4 right-4 text-red-500 text-xl">❤</div>
            <div class="text-center mb-4">
              <img src="../asserts/images/tp5.png" alt="宠物训练科普" class="w-24 h-auto mx-auto rounded-lg mb-2">
            </div>
            <h3 class="text-xl font-bold text-orange-600 mb-3 text-center">宠物训练</h3>
            <p class="text-gray-700 text-sm leading-relaxed">
              宠物需要适当的训练，可减少不必要的损失和麻烦。简单的指令、指示、手势训练，让宠物明白什么是可以做的，什么是不可以做的。比如：引导其到正确的地方上厕所，不随地大小便；教会其使用猫抓板，不乱抓乱咬；养成固定位置进食，防止其乱吃不明食物。这样可以有效降低我们养宠的难度哦~</p>
          </div>
          
          <!-- 宠物日常护理科普 -->
          <div class="science-card bg-orange-50 rounded-xl p-6 shadow-md border-2 border-orange-100 relative">
            <div class="absolute top-4 right-4 text-red-500 text-xl">❤</div>
            <div class="text-center mb-4">
              <img src="../asserts/images/tp.png" alt="宠物日常护理科普" class="w-24 h-auto mx-auto rounded-lg mb-2">
            </div>
            <h3 class="text-xl font-bold text-orange-600 mb-3 text-center">宠物日常护理</h3>
            <p class="text-gray-700 text-sm leading-relaxed">
              宠物的日常护理对其健康至关重要。定期梳理毛发可以减少掉毛、预防皮肤问题；定期修剪指甲避免抓伤家人；定期清洁耳朵预防耳螨；定期刷牙预防口腔疾病。此外，合理的饮食搭配和适量的运动也是保持宠物健康的重要因素。记住，良好的日常护理能让您的宠物更健康、更快乐！</p>
          </div>
        </div>
      </div>
    </div>
    
    <button class="mt-8 px-6 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600 transition-colors" @click="goBack">
      返回
    </button>
  </div>
</template>

<script>
export default {
  name: 'PetInsurance',
  methods: {
    goBack() {
      window.history.back();
    }
  }
}
</script>

<style scoped>
.pet-insurance-container {
  line-height: 1.6;
}

h1 {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

h2 {
  color: #f97316;
}

button {
  cursor: pointer;
}

.label {
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 640px) {
  .pet-insurance-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  .case-details {
    padding: 1rem;
  }
}
</style>